﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Elycharts  例子代码 :  线条 </title>


    <!-- 使用 Elycharts  需要 使用下面这三个 js 类库.   -->
    <script src="../../Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="../../Scripts/raphael.js" type="text/javascript"></script>
    <script src="../../Scripts/elycharts.js" type="text/javascript"></script>


    <script type="text/javascript">
        $(document).ready(function () {

            // 线条的例子 1 
            $("#line_chart_1").chart({
                // 线条的情况下， type 的数值， 需要设置为  line.
                type: "line",

                // value 部分， 填写的是具体的数据.
                values: {
                    serie1: [64, 72, 43, 1],
                    serie2: [24, 53, 21, 62]
                }
            });



            // 线条的例子 2
            $("#line_chart_2").chart({
                // 线条的情况下， type 的数值， 需要设置为  line.
                type: "line",

                // labels 为横轴的标题信息.
                labels: ["2010年", "2011年", "2012年", "2013年"],

                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a 2010年人数", "a 2011年人数", "a 2012年人数", "a 2013年人数"],
                    serie2: ["b 2010年人数", "b 2011年人数", "b 2012年人数", "b 2013年人数"]
                },

                // value 部分， 填写的是具体的数据.
                values: {
                    serie1: [45, 37, 67, 81],
                    serie2: [86, 25, 75, 49]
                },


                // 边框，四个数值 [上，右，下，左]
                // 注： 如果边框太小，那么 标题可能显示不出来.
                margins: [10, 10, 20, 50],


                // 每条线的特殊设置.
                series: {
                    serie1: {
                        color: "red"
                    },
                    serie2: {
                        color: "blue"
                    }
                },


                defaultAxis: {
                    labels: true
                },


                features: {
                    grid: {
                        draw: true,
                        forceBorder: true
                    }
                }
            });





            // 线条的例子 3

            // 这里先定义 模板.
            $.elycharts.templates['line_basic'] = {
                // 线条的情况下， type 的数值， 需要设置为  line.
                type: 'line',

                // 边框，四个数值 [上，右，下，左]
                // 注： 如果边框太小，那么 标题可能显示不出来.
                margins: [10, 10, 20, 50],


                defaultSeries: {
                    plotProps: {
                        "stroke-width": 4
                    },
                    dot: true,
                    dotProps: {
                        stroke: "white",
                        "stroke-width": 2
                    }
                },

                // 每条线的特殊设置.
                series: {
                    serie1: { color: 'red' },
                    serie2: { color: 'blue' }
                },

                defaultAxis: {
                    labels: true
                },
                features: {
                    grid: {
                        draw: [true, false],
                        props: {
                            "stroke-dasharray": "-"
                        }
                    },

                    // 这里定义了 标题显示的位置.
                    legend: {
                        horizontal: false,
                        width: 80,
                        height: 50,
                        x: 210,
                        y: 220,
                        dotType: 'circle',
                        dotProps: {
                            stroke: 'white',
                            "stroke-width": 2
                        },
                        borderProps: {
                            opacity: .3,
                            fill: '#c0c0c0',
                            "stroke-width": 0,
                            "stroke-opacity": 0
                        }
                    }
                }
            };



            $("#line_chart_3").chart({

                // 这里直接引用 前面定义的  template
                // 当画面上， 有多个相同的，复杂的表格。 
                // 可以定义一个 模板， 多个图表公用.
                template: "line_basic",

                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                tooltips: {
                    serie1: ["a 2010年人数", "a 2011年人数", "a 2012年人数", "a 2013年人数"],
                    serie2: ["b 2010年人数", "b 2011年人数", "b 2012年人数", "b 2013年人数"]
                },

                // 数据部分.
                values: {
                    serie1: [78, 79, 42, 6],
                    serie2: [42, 17, 82, 56]
                },

                // 显示每条线的明细.
                legend: {
                    serie1: "a 部门",
                    serie2: "b 部门"
                }
            });








            // 线条的例子 4

            // 这里先定义 模板.
            $.elycharts.templates['line_basic_4'] = {
                // 线条的情况下， type 的数值， 需要设置为  line.
                type: 'line',

                // 边框，四个数值 [上，右，下，左]
                // 注： 如果边框太小，那么 标题可能显示不出来.
                margins: [10, 20, 20, 50],


                defaultSeries: {

                    // plotProps 里面， 是定义线的信息, 这里定义的是  线的宽度是 8
                    plotProps: {
                        "stroke-width": 8
                    },

                    // dot 表示， 数值的地方， 是不是要显示一个点.
                    dot: true,

                    // dotProps 表示那个 点的显示， 这里是用白色， 宽度为2 的线，来画一个圈.
                    dotProps: {
                        stroke: "white",
                        "stroke-width": 2
                    },

                    // tooltip 和 highlight 这里定义了， 当鼠标移动到指定点上的时候， 点显示为 黄色边框的白点.
                    tooltip : {
                      frameProps : { stroke : "yellow", opacity : .75 }
                    },
                    highlight : {
                      newProps : { fill : "white", stroke : "yellow", r : 8 }
                    },
                    startAnimation: {
                        active: true,
                        // 原因不明， 加了这个要出错
                        // type: 'avg',
                        speed: 1000
                    }
                },

                // 每条线的特殊设置.
                series: {
                    serie1: { color: 'green' },
                    serie2: { color: 'blue' },
                    serie3: { color: 'red' }
                },


                // 这里设置 是否显示 横/纵 坐标的描述信息.
                // 如果设置为 flase, 那么画面就只有线，没有坐标显示的数值了.
                defaultAxis: {
                    labels: true
                },


                features: {

                    mousearea: { type: 'index' },
                    highlight: {
                        indexHighlight: 'auto',
                        indexHighlightProps: { "stroke-dasharray": "-", "stroke-width": 2, opacity: .5 }
                    },


                    grid: {
                        draw: [true, false],
                        props: {
                            "stroke-dasharray": "-"
                        }
                    },


                    // 这里定义了 标题显示的位置.
                    legend: {
                        // 如果 horizontal 为 true， 那么 标题 显示的为横向现实
                        // 如果 horizontal 为 false， 那么 标题 显示的为纵向现实
                        horizontal: true,

                        // 标题的宽度/高度.
                        width: 180,
                        height: 50,

                        // 标题显示在画面的什么坐标上面.
                        x: 220,
                        y: 220,

                        // 那个点 的样式.  
                        dotType: 'circle',
                        dotProps: {
                            stroke: 'white',
                            "stroke-width": 2
                        },

                        // 边框的样式.
                        borderProps: {
                            
                            opacity: .3,
                            
                            // 标题框的背景颜色.
                            fill: '#c0c0c0',

                            // 标题框的边框的宽度.
                            "stroke-width": 2
                        }
                    }
                }
            };


            $("#line_chart_4").chart({

                // 这里直接引用 前面定义的  template
                template: "line_basic_4",

                // tooltips 为 鼠标停留在指定位置上， 显示的提示信息.
                /*
                tooltips: {
                    serie1: ["a 2010年人数", "a 2011年人数", "a 2012年人数", "a 2013年人数"],
                    serie2: ["b 2010年人数", "b 2011年人数", "b 2012年人数", "b 2013年人数"]
                },
                */

                tooltips:
                    ["a 2010年人数", "a 2011年人数", "a 2012年人数", "a 2013年人数"],

                // 数据部分.
                values: {
                    serie1: [32, 24, 54, 46],
                    serie2: [92, 77, 35, 80],
                    serie3: [66, 68, 27, 95]
                },

                // 显示每条线的明细.
                legend: {
                    serie1: "a 部门",
                    serie2: "b 部门",
                    serie3: "c 部门"
                },
                
                // labels 为横轴的标题信息.
                labels: ["2010年", "2011年", "2012年", "2013年"]

               
            });

        });
    </script>

</head>
<body>


<h3>  线条的例子 1   </h3>

<p> 注意事项： 自己定义的 div, 需要自己定义好  宽度与高度， 否则显示出来的图表可能就很难看了。 </p>

<div id="line_chart_1"  style="width:600px;height:200px;border-style:solid;">  
</div>



<hr />
<h3>  线条的例子 2  </h3>

<div id="line_chart_2"  style="width:600px;height:200px;border-style:solid;">  
</div>


<hr />
<h3>  线条的例子 3  </h3>

<div id="line_chart_3"  style="width:600px;height:300px;border-style:solid;">  
</div>



<hr />
<h3>  线条的例子 4  </h3>

<div id="line_chart_4"  style="width:600px;height:300px;border-style:solid;">  
</div>



</body>
</html>
